<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item>
        <el-input size="small" v-model="queryForm.name" clearable placeholder="输入酒店名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="list">查询</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="dosellerAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%" height="510" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
      <!-- <el-table-column label="编号" prop="svrId"></el-table-column> -->
      <el-table-column label="酒店名字" prop="name">
      </el-table-column>
      <el-table-column label="星级" prop="star">
      </el-table-column>
      <el-table-column label="酒店地址" prop="address">
      </el-table-column>
      <el-table-column label="联系人" prop="linkName">
      </el-table-column>
      <el-table-column label="酒店电话" prop="linkTel">
      </el-table-column>
      <el-table-column label="开业时间" prop="openTime">
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="doEdit(scope.$index, scope.row)" icon="el-icon-edit">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
        :page-sizes="[5,10, 25, 50, 100]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        queryForm: {
          name: null,
          page: 1,
          rows: 10,
          total: 0
        },
        // dialogMergeFormVisible: false,
        mergeForm: {
          name: null,
          star: null,
          address: null,
          linkName: null,
          linkTel: null,
          openTime: null
        },
        tableData: []
      }
    },
    methods: {
      list: function() {
        console.log('list');
        this.axios.post(this.axios.urls.SYS_HOTELSELLER_LIST, this.queryForm).then((response) => {
          console.log(response);
          this.tableData = response.data.result
          this.queryForm.page = response.data.page
          this.queryForm.rows = response.data.rows
          this.queryForm.total = response.data.total
        })
      },
      handleSizeChange(rows) {
        // console.log('handleSizeChange');
        this.queryForm.page = 1
        this.queryForm.rows = rows
        this.list()
      },
      handleCurrentChange(page) {
        // console.log('handleCurrentChange');
        this.queryForm.page = page
        this.list()
      },
      doLoad: function(index, row) {
        // this.mergeForm.svrCustName = row.svrCustName
        // this.mergeForm.svrTitle = row.svrTitle
        // this.mergeForm.svrType = row.svrType
        // this.mergeForm.svrCreateBy = row.svrCreateBy
        // this.mergeForm.svrCreateDate = row.svrCreateDate
        // this.mergeForm.svrStatus = row.svrStatus

        // this.dialogMergeFormVisible = true
      },
      dosellerAdd: function() {
        this.$router.push("sellerAdd")
      },
      doEdit: function(index, row) {
        this.$store.commit('setSeller', {
          seller: row
        })
        this.$router.push({
          path: '/AppMain/sellerUpdate',
        });
      },
      doSubmit: function() {
        this.$refs['mergeFrom'].validate((valid) => {
          if (valid) {
            this.axios.post(this.axios.urls.SYS_HOTELSELLER_MERGE,
              this.mergeFrom
            ).then((response) => {
              this.tableData = response.data.result
              this.$message({
                type: 'success',
                message: response.data.message
              }); //异步对话框
              if (!this.mergeFrom.id) { //增加
                this.queryForm.page = 1
              }
              this.dialogMergeFromVisible = false
              this.list()
            });
          }
        });
      }
    },
    created() {
      this.list()
    }
  }
</script>

<style>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .block {
    margin-top: 20px;
    text-align: right;
  }

  .disabled {
    font-size: 17px;
  }
</style>
